<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <div :class="{hasTagsView:needTagsView}">
      <div :class="{'fixed-header':fixedHeader}" :style="'background-image:url('+ Background_1 +');height: 100%;width: 100%; justify-content: center;background-size: cover;'">
        <navbar />
        <!--        模块选择图标-->
        <el-row class="modules">
          <el-col v-for="(name, index) in sidebarRouters" v-if="name.pid === null" :key="name.id" class="module" type="flex" justify="space-between">
            <el-card shadow="hover" style="cursor: hand" @click.native="ClickModule(index)">
              {{ name.name }}
            </el-card>
          </el-col>
        </el-row>
        <!--  中部容器      -->
        <el-container class="container">
          <el-main class="main-title">▍TestVersatile</el-main>
          <el-main class="main-subtitle">系统模块选择</el-main>
          <el-main class="statistic" style="left: 40%; top: 20%">
            <div class="statistic-img" :style="'background-image:url('+ statistic_1 +');'" />
            <div class="statistic-title">1530</div>
            <div class="statistic-subtitile">注册用户数</div>
          </el-main>
          <el-main class="statistic" style="left: calc(40% + 300px);top: 20%">
            <div class="statistic-img" :style="'background-image:url('+ statistic_2 +');'" />
            <div class="statistic-title">1530</div>
            <div class="statistic-subtitile">部署服务器数</div>
          </el-main>
          <el-main class="statistic" style="left: calc(40% + 600px);top: 20%">
            <div class="statistic-img" :style="'background-image:url('+ statistic_3 +');'" />
            <div class="statistic-title">1530</div>
            <div class="statistic-subtitile">自动化套件数</div>
          </el-main>
          <el-main class="statistic" style="left: calc(40% - 300px);top: calc(20% + 300px)">
            <div class="statistic-img" :style="'background-image:url('+ statistic_4 +');'" />
            <div class="statistic-title">1530</div>
            <div class="statistic-subtitile">接口套件数</div>
          </el-main>
          <el-main class="statistic" style="left: 40%;top: calc(20% + 300px)">
            <div class="statistic-img" :style="'background-image:url('+ statistic_5 +');'" />
            <div class="statistic-title">1530</div>
            <div class="statistic-subtitile">页面测试数</div>
          </el-main>
          <el-main class="statistic" style="left: calc(40% + 300px);top: calc(20% + 300px)">
            <div class="statistic-img" :style="'background-image:url('+ statistic_6 +');'" />
            <div class="statistic-title">1530</div>
            <div class="statistic-subtitile">个人笔记数</div>
          </el-main>
        </el-container>

      </div>
    </div>
    <!--  防止刷新后主题丢失  -->
    <Theme v-show="false" ref="theme" />
  </div>
</template>

<script>
import { Navbar } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapGetters, mapState } from 'vuex'
import Theme from '@/components/ThemePicker'
import Cookies from 'js-cookie'
import Background_1 from '@/assets/images/module-background.png'
import picture1 from '@/assets/images/picture1.png'
import picture2 from '@/assets/images/picture2.png'
import statistic_1 from '@/assets/images/statistic-1.png'
import statistic_2 from '@/assets/images/statistic-2.png'
import statistic_3 from '@/assets/images/statistic-3.png'
import statistic_4 from '@/assets/images/statistic-4.png'
import statistic_5 from '@/assets/images/statistic-5.png'
import statistic_6 from '@/assets/images/statistic-6.png'

export default {
  name: 'Layout',
  components: {
    Navbar,
    Theme
  },
  mixins: [ResizeMixin],
  data() {
    return {
      Background_1: Background_1,
      picture1: picture1,
      picture2: picture2,
      statistic_1: statistic_1,
      statistic_2: statistic_2,
      statistic_3: statistic_3,
      statistic_4: statistic_4,
      statistic_5: statistic_5,
      statistic_6: statistic_6
    }
  },
  computed: {
    ...mapGetters([
        'sidebarRouters'
      ]
    ),
    ...mapState({
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      showSettings: state => state.settings.showSettings,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  mounted() {
    if (Cookies.get('theme')) {
      this.$refs.theme.theme = Cookies.get('theme')
      this.$store.dispatch('settings/changeSetting', {
        key: 'theme',
        value: Cookies.get('theme')
      })
    }
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    },
    ClickModule(sort) {
      Cookies.set('sort', sort)
      this.$router.push({ name: 'Dashboard' })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  transition: width 0.28s;
  padding: 0;
  width: 100%;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px)
}

.mobile .fixed-header {
  width: 100%;
}
.modules{
  width: 60%;
  height: 50px;
  margin-left: 200px;
  margin-top: 15px;
}
.module{
  width: 130px;
  height: 100%;
  display:inline;
}
.title{
  font-size: 5px;
}
.container{
  width: 90%;
  height: 75%;
  background-color: rgb(255, 255, 255);
  margin-left: 120px;
  margin-top: 35px;
  border-radius: 44px;
  box-shadow: 0 0 32px 0 rgba(56, 63, 98, 0.17);

}
.main-title{
  font-size: 15px;
  color: rgb(90, 102, 254);
  line-height: 1.58;
  -moz-transform: matrix( 2.63316177427812,0,0,2.63316177427812,0,0);
  -webkit-transform: matrix( 2.63316177427812,0,0,2.63316177427812,0,0);
  -ms-transform: matrix( 2.63316177427812,0,0,2.63316177427812,0,0);
  position: absolute;
  left: 16.5%;
  top: 25%;
  z-index: 135;
}
.main-subtitle{
  font-size: 20px;
  color: rgb(51, 51, 51);
  line-height: 1.502;
  -moz-transform: matrix( 2.10968445866289,0,0,2.10968445866289,0,0);
  -webkit-transform: matrix( 2.10968445866289,0,0,2.10968445866289,0,0);
  -ms-transform: matrix( 2.10968445866289,0,0,2.10968445866289,0,0);
  position: absolute;
  left: 15.5%;
  top: 29%;
  z-index: 137;
  -webkit-box-reflect: below -49px
  -webkit-gradient(linear,left top,left bottom, from(rgba(0,0,0,0)),to(rgba(255,255,255,0.1)));
}
.statistic{
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 16px 0 rgba(167, 167, 167, 0.39);
  position: absolute;
  width: 292px;
  height: 292px;
  z-index: 100;
}
.statistic-subtitile{
  font-size: 15px;
  color: rgb(153, 153, 153);
  line-height: 1.502;
  position: absolute;
  left: 100px;
  top: 230px;
  z-index: 103;
}

.statistic-title{
  font-size: 18px;
  color: rgb(51, 51, 51);
  line-height: 1.502;
  -moz-transform: matrix( 2.13483463922275,0,0,2.13483463922275,0,0);
  -webkit-transform: matrix( 2.13483463922275,0,0,2.13483463922275,0,0);
  -ms-transform: matrix( 2.13483463922275,0,0,2.13483463922275,0,0);
  position: absolute;
  left: 117px;
  top: 198px;
  z-index: 104;
}
.statistic-img{
  height: 50%;
  width: 50%;
  background-size: cover;
  margin-left: 50px;
  margin-top: 20px;
}

</style>
